{layout name="layout/header" /}
<link href="root/css/plugins/footable/footable.core.css" rel="stylesheet">
<link href="root/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="root/css/plugins/datetimepicker/bootstrap-datetimepicker.css" rel="stylesheet">

<link href="root/css/plugins/switchery/switchery.css" rel="stylesheet">
<script src="root/js/plugins/switchery/switchery.js"></script>
<!--<link href="root/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">-->
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5><a href="{:url('vote/index')}">活动列表</a>/{$vote.name} 投票统计 (总数:<span class="text-danger">{$data.total}</span>)</h5>
                </div>
                <div class="ibox-content">
                    <p>
                        <a class="btn btn-success btn-outline empty" href="#">清空搜索条件</a>
                        <a class="btn btn-success btn-outline" onclick="downloadCount()" href="#">投票统计下载</a>

                        <!--<a class="btn btn-success btn-outline excel" href="#">下载</a>-->
                        <button type="button" class="btn btn-primary btn-outline refresh">刷新</button>
                        <a type="button" class="btn btn-primary btn-outline" href="{:url('vote/index')}">返回列表</a>
                    </p>
                    <form class="form-inline">
                        <div class="form-group">
                            <select class="form-control " id="item">
                                <option value="0">全部</option>
                                {volist name="$items" id="vo"}
                                <option value="{$vo.id}">{$vo.name}({$vo.mid})</option>
                                {/volist}
                            </select>
                        </div>
                        <div class="form-group">
                            <select class="form-control " id="order">
                                <option value="0">正常排序</option>
                                <option value="asc">正序</option>
                                <option value="desc">倒序</option>
                            </select>
                        </div>
                        <div  class="form-group">
                            <input type="text"  class="form-control datetimepicker" id="start" readonly placeholder="开始时间" value="{$start}">
                            <span>-</span>
                            <input type="text"  class="form-control datetimepicker" id="end" readonly placeholder="截止时间" value="{$end}">
                        </div>
                        <div class="form-group">
                            <input type="text" id="keyword" class="form-control" placeholder="电话号码" value="{$keyword}">
                        </div>
                        <a class="btn btn-success search">查询</a>
                    </form>
                    <!--<h3 class="font-bold">块级按钮</h3>-->
                    <!--<p>-->
                        <!--<button type="button" class="btn btn-block btn-outline btn-primary">这是一个块级按钮</button>-->
                    <!--</p>-->
                </div>
                <div class="ibox-content">
                    <div id="main" style="width: auto;height:400px;"></div>
                </div>
                <div class="ibox-content">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>电话</th>
                                <th>投票数</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                        {volist name="data.list" id="vo"}
                        <tr >
                            <td>{$vo.mobile}</td>
                            <td>{$vo.total}</td>
                            <td>
                                <a class="btn btn-primary btn-sm" href="#" onclick="infoByMobile({$vo.mobile})">详情</a>
                            </td>
                        </tr>
                        {/volist}
                        </tbody>
                        <tfoot>
                        <tr>
                            <td colspan="5">
                                {$data.page}
                            </td>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!--layer-->
<script src="root/js/plugins/layer/layer.min.js"></script>
<!--echarts-->
<script src="root/js/echarts.common.min.js"></script>
<!-- iCheck -->
<script src="root/js/plugins/iCheck/icheck.min.js"></script>
<script src="root/js/plugins/datetimepicker/bootstrap-datetimepicker.js"></script>
<script src="root/js/plugins/datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
<script>
    var vote_id = "{$vote.id}";
    $(document).ready(function() {
        var order = "{$order}";
        var item = "{$item}";
        if(order)
            $('#order').val(order);
        if(item)
            $('#item').val(item);
        checks();
        //单选，复选按钮
        function checks () {
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green'
            })
        };
        $('.datetimepicker').datetimepicker({
            format:'yyyy-mm-dd hh:ii',
            language:  'zh-CN',
            weekStart: 1,
            todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            forceParse: 0,
            showMeridian: 1
        });
        var elem = document.querySelectorAll('.js-switch');
        elem.forEach(function(i,index){
            var a= "a" +index;
            a = new Switchery(i, {
            color: '#1AB394'
            });
        });

        //搜索
        $('.search').click(function () {
            var keyword = $("#keyword").val().trim();
            var order = $("#order").val();
            var start = $('#start').val()?$('#start').val():0;
            var end = $('#end').val()?$('#end').val():0;
            item = $('#item').val();
            var url = "{:url('count',['vote_id'=>$vote.id])}"+'/item/'+item+'/start/'+start+'/end/'+end+'/order/'+order+'/keyword/'+keyword;
            window.location.href = url;
        });
        $('.empty').click(function () {
            var url = "{:url('count',['vote_id'=>$vote.id])}";
            window.location.href = url;
        })
        $('.excel').click(function () {

        })

    });
    //投票详情
    function infoByMobile(mobile) {
        layer.open({
            type: 2,
            title: mobile+' 投票统计',
            shadeClose: true,
            shade: false,
            maxmin: true, //开启最大化最小化按钮
            area: ['1020px', '700px'],
            content: "{:url('infoByMobile')}"+"/vote_id/"+vote_id+"/mobile/"+mobile,
            end: function(){

            }
        });
    }
    function downloadCount() {
        var keyword = $("#keyword").val().trim();
        var order = $("#order").val();
        var start = $('#start').val()?$('#start').val():0;
        var end = $('#end').val()?$('#end').val():0;
        item = $('#item').val();
        var url = "{:url('downloadCount',['vote_id'=>$vote.id])}"+'/item/'+item+'/start/'+start+'/end/'+end+'/keyword/'+keyword;
        window.location.href = url;

    }
</script>
<script>
    var myChart = echarts.init(document.getElementById('main'));
    var data = {$chartData};
    option = {
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                label: {
                    show: true
                }
            }
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true},
                dataView: {
                    readOnly: true,
                }
            }
        },
        calculable : true,
        grid: {
            top: '12%',
            left: '1%',
            right: '10%',
            containLabel: true
        },
        xAxis: [
            {
                type : 'category',
                data : data.category,
                name : '日期',
            }
        ],
        yAxis: [
            {
                type : 'value',
                name : '投票数',
            }
        ],
        dataZoom: [
            {
                show: true,
                start: 0,
                end: 100
            },
            {
                type: 'inside',
                start: 0,
                end: 100
            },
        ],
        series : [
            {
                name: '投票数',
                type: 'bar',
                data: data.total,
                itemStyle : { normal: {label : {show: true, position: 'top'}}}


            },
        ]
    };

    myChart.setOption(option);

</script>
